);
// ─── DATA: lesson sets and remix vibes per mode ─────────────────────────────
// Each row's mood-mascot color is chosen for vibe: yellow = curious warm-up,
// orange = focused/primary, pink = social/happy, lime = calm/refresher,
// cyan = alert/countdown, indigo = serious/focus, teal = playful surprise.
const LESSONS_GENERAL = [
{id:"t1",title:"Ordering at a Restaurant",type:"Speak Phrases",duration:"3 min",xp:10,caption:"You'll be ready for lunch in no time.",icon:},
{id:"t2",title:"Talk about your weekend plans",type:"Guided Talk",duration:"5 min",xp:30,coins:5,caption:"Warm up with a casual chat — no right answers.",icon:},
{id:"t3",title:"Review: Coffee & Tea phrases",type:"Review",duration:"2 min · 4 phrases due",xp:15,caption:"A quick refresh on what stuck from last time.",icon:},
{id:"t4",title:"Something that made you smile",type:"Free Talk",duration:"3 min",xp:20,coins:3,caption:"Keep it light — 3 minutes of just you talking.",icon:},
];
const LESSONS_SPM = [
{id:"p1",title:"Warm-up with Pip",type:"Part 1 · Interview",duration:"3 min",xp:10,caption:"Pip will ask a few easy questions — just like in the real exam.",icon:},
{id:"p2",title:"Long turn: A person you admire",type:"Part 2 · Long Turn",duration:"4 min · 20s prep",xp:30,coins:5,caption:"Tia's listening. Speak for one minute — you've got this.",icon:},
{id:"p3",title:"Discuss: Social media — friend or foe?",type:"Part 3 · Pair Discussion",duration:"5 min",xp:25,coins:5,caption:"Roly's the discussion partner. Stay in the conversation.",icon:},
{id:"p4",title:"Review: Linking words from yesterday",type:"Review",duration:"2 min · 5 phrases due",xp:15,caption:"A quick refresh on what Tia coached you on.",icon:},
];
const VIBES_GENERAL = [
{title:"Challenge me", desc:"Harder topics & longer talks", icon:},
{title:"Keep it light", desc:"Easy phrases & short sessions", icon:},
{title:"Work focus", desc:"Professional English all day", icon:},
{title:"Surprise me", desc:"Let us pick something fresh", icon:},
];
const VIBES_SPM = [
{title:"Polish my Part 2", desc:"Tighten long turn structure & vocab", icon:},
{title:"Discussion practice", desc:"More Part 3 reps with Roly", icon:},
{title:"Mock exam day", desc:"Full 3-part Paper 3 simulation", icon:},
{title:"Surprise me", desc:"Let us pick something fresh", icon:},
];
// ─── SPM EXPLORE SCREEN ─────────────────────────────────────────────────────
const SPMExploreContent = () => (
<>
{/* Title strip */}
SPM ENGLISH · PAPER 3 SPEAKING
{/* Big header band — restates context with more depth than the home countdown */}
DAY 13 OF PRACTICE
Building your Paper 3 confidence
Paper 3 in October · 12 sessions in
LAST MOCK
17/24
STREAK
7 days
HOURS
4.2
{/* Practice by Part */}
Practice by Part
{[
{Char:Pip, title:"Part 1 — Interview", subtitle:"Warm-up Q&A with Pip", done:8, total:24},
{Char:Tia, title:"Part 2 — Long Turn", subtitle:"1-minute solo talks with Tia", done:12, total:32},
{Char:Roly, title:"Part 3 — Discussion", subtitle:"Pair conversations with Roly", done:6, total:18},
].map((p,i) => (
{p.title}
{p.subtitle}
{p.done} DONE · {p.total - p.done} TO TRY
))}
{/* Mock Exam */}
Mock Exam
Take a 10-minute mock
Full 3-part Paper 3 simulation with feedback against the real examiner rubric.
Last mock: 17/24· 4 days ago
Start mock exam
{/* Reference */}
Reference
{[
{title:"How Paper 3 is marked", subtitle:"The examiner rubric, in plain English"},
{title:"What to expect on the day", subtitle:"Format, timing, and how to stay calm"},
{title:"Sample topics by part", subtitle:"Past paper-style prompts to practice with"},
{title:"Common student errors", subtitle:"Tense, articles, code-switching — and how to dodge them"},
].map((r,i) => (
{r.title}
{r.subtitle}
))}
{/* Recent practice */}
Recent Practice
{[
{date:"Yesterday", title:"Part 2 — Describe a childhood memory", note:"Strong vocabulary, watch tense agreement", Char:Tia},
{date:"Mon · 10 May", title:"Part 3 — Should phones be banned in school?", note:"Good linking words, push for more counter-arguments", Char:Roly},
{date:"Sun · 9 May", title:"Mock exam", note:"17/24 · best yet", mood:"indigo"},
].map((r,i) => (
{r.Char && }
{r.mood && }
{r.date.toUpperCase()}
{r.title}
"{r.note}"
))}
);
// ─── MANAGE SPM MODE SHEET ──────────────────────────────────────────────────
// Bottom sheet that opens when the SPM pill is tapped. Centralises mode
// management — open the hub, edit the (optional) Paper 3 date, take a break
// day without leaving SPM mode, or switch the mode off entirely.
const ManageSPMSheet = ({ onClose, onOpenHub, onSwitchOff }) => (
{[
{title:"Open SPM hub", desc:"All your Paper 3 practice in one place", onClick:onOpenHub},
{title:"Edit Paper 3 date", desc:"Set or change your assessment date", onClick:onClose},
{title:"Take a break day", desc:"Switch today's lessons to general English", onClick:onClose},
].map((r,i) => (
{r.title}
{r.desc}
))}
Switch off SPM mode
Your sessions, streak, and progress all stay.
);
// ─── PLACEHOLDER for tabs not built in this prototype ───────────────────────
const PlaceholderScreen = ({ label, sub }) => (
{label}
{sub}
);
// ─── APP ────────────────────────────────────────────────────────────────────
export default function App() {
// Default to SPM so the new state is visible first; flip to General to compare.
const [mode, setMode] = useState("spm");
const lessons = mode === "spm" ? LESSONS_SPM : LESSONS_GENERAL;
const vibes = mode === "spm" ? VIBES_SPM : VIBES_GENERAL;
const initialTasks = Object.fromEntries(lessons.map(l => [l.id, false]));
const [tasks, setTasks] = useState(initialTasks);
const [showRemix, setShowRemix] = useState(false);
const [remixesLeft, setRemixesLeft] = useState(3);
const [activeTab, setActiveTab] = useState("home");
const [showManageSheet, setShowManageSheet] = useState(false);
// Reset task progress when switching modes so the UI is coherent
const switchMode = (m) => {
setMode(m);
const fresh = Object.fromEntries((m === "spm" ? LESSONS_SPM : LESSONS_GENERAL).map(l => [l.id, false]));
setTasks(fresh);
};
const doneCount = Object.values(tasks).filter(Boolean).length;
const xpEarned = lessons.reduce((s,l)=> tasks[l.id] ? s + l.xp : s, 0);
const xpGoal = lessons.reduce((s,l)=> s + l.xp, 0);
const allDone = doneCount === lessons.length;
const nextLesson = lessons.find(l => !tasks[l.id]);
const nextIndex = nextLesson ? lessons.findIndex(l => l.id === nextLesson.id) + 1 : lessons.length;
const toggleTask = (id) => setTasks(prev => ({...prev, [id]: !prev[id]}));
const handleRemix = () => {
if (remixesLeft <= 0) return;
setTasks(Object.fromEntries(lessons.map(l => [l.id, false])));
setRemixesLeft(r => Math.max(0, r - 1));
setShowRemix(false);
};
// SPM-mode specific copy
const greetingTail = mode === "spm"
? `${lessons.length - doneCount} PRACTICE${(lessons.length - doneCount) === 1 ? "" : "S"} TO GO`
: `${lessons.length - doneCount} TO GO`;
const heroContextLabel = mode === "spm" ? "PAPER 3 PRACTICE" : "UP NEXT";
const heroDateLabel = mode === "spm" ? "DAY 13 OF PRACTICE" : "FRI · 17 APR";
const lessonsHeader = mode === "spm" ? "Today's Paper 3 Practice" : "Today's Lessons";
// Phrase of the Day (SPM) vs Word of the Day (General)
const dailyWord = mode === "spm"
? {
kind: "PHRASE OF THE DAY",
headline: "I see your point, but…",
meta: "Part 3 · disagreeing politely",
example: "“I see your point, but I think social media also brings families closer.”",
cta: "Try it with Roly",
}
: {
kind: "WORD OF THE DAY",
headline: "cozy",
meta: "/ˈkəʊzi/ · adj.",
example: "“This mamak is so cozy — I could sit here all night.”",
cta: "Use it in a talk",
};
return (
<>
{/* Prototype-only toggle. In the real app this lives in Profile. */}
{activeTab === "home" && <>
{/* Greeting + (in SPM mode) the persistent mode pill on the right.
Tapping the pill opens the Manage SPM Mode sheet. */}
{!allDone && (